import styles from "@styles/active/activelist.module.less";

import React, { useState, useEffect } from "react";
import { Table, Space } from "antd";
import { withRouter } from "react-router-dom";

import Http from "@utils/api";
import { filMenuState } from "@actions/data";

function WhiteListList({ history, formdate }) {
  const [tableData, setTableData] = useState({});
  const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
  const [loading, setLoading] = useState(false);

  // 调用 - 活动列表
  useEffect(() => {
    Http.pageConditionQueryActivityByCreatorId({
      ...pagination,
      ...formdate,
    }).then(({ data }) => {
      setTableData(data);
      setLoading(false);
    });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagination, formdate]);

  // 白名单title
  const columns = [
    { title: "活动名称", dataIndex: "activityName", key: "activityName" },
    {
      title: "活动状态",
      dataIndex: "activityStatus",
      key: "activityStatus",
      render: (text, record) =>
        record.isDraft ? (
          <span className={styles.isDraft}>草稿</span>
        ) : (
          <span className={styles["state_" + text]}>{filMenuState(text)}</span>
        ),
    },
    {
      title: "抽奖活动时间",
      dataIndex: "startDate",
      key: "startDate",
      render: (text, record) => (
        <span>
          {text} ~ {record.endDate}
        </span>
      ),
    },
    {
      title: "公开方式",
      dataIndex: "isEveryoneExpose",
      key: "isEveryoneExpose",
      render: (text, record) => (text ? "所有用户" : "白名单用户"),
    },
    {
      title: "操作",
      dataIndex: "activityBasicId",
      key: "activityBasicId",
      render: (text, record) => (
        <Space size="middle" className={styles.operation}>
          <span onClick={() => handleSetWhiteList(record)}>设置白名单</span>
        </Space>
      ),
    },
  ];

  const handleSetWhiteList = (data) => {
    history.push({ pathname: "/lotteryWhiteList/config", state: data });
  };

  const filterParams = (pagination, params = {}) => {
    const filterArray = ["total", "current"];
    Object.keys(pagination)
      .filter((v) => !filterArray.includes(v))
      .map((v) => (params[v] = pagination[v]));
    let { current } = pagination;
    params.page = current;
    return params;
  };

  const handleTableChange = (pagination) => {
    setPagination(filterParams(pagination));
    setLoading(true);
  };

  return (
    <section className={styles.activeTablebox}>
      {tableData && tableData.rows ? (
        <Table
          columns={columns}
          dataSource={tableData.rows}
          pagination={{
            ...pagination,
            total: tableData.total,
            showTotal: () => `共 ${tableData.total}条`,
            showQuickJumper: true,
            showSizeChanger: true,
          }}
          rowKey={(record) => record.activityBasicId}
          loading={loading}
          onChange={handleTableChange}
        />
      ) : (
        <>无数据</>
      )}
    </section>
  );
}

export default withRouter(WhiteListList);
